<template>
	<view>
		<view class="top-box">
			<view class="nav-bar" :style="{ height: navBarHeight }"></view>
			<view class="head-flex">
				<view>
					<image class="img-head" src="../static/images/ranking/15.png"></image>
					<view class="head-text">用户收益说明近期，省市督查组以群众反映的问题线索为主要抓手，采取“四不两直”的方式针对各地暑期违规组织补</view>
				</view>
				<image class="img-head1" src="../static/images/ranking/12.png"></image>
			</view>

		</view>

		<view class="ranking">
			<view class="ranking-flex">
				<view class="profile">
					<view class="logo"></view>
				</view>
				<image class="ranking-img" src="../static/images/ranking/1.png"></image>
			</view>
			<view class="ranking-flex">
				<view class="profile1">
					<view class="logo"></view>
				</view>
				<image class="ranking-img1" src="../static/images/ranking/2.png"></image>
			</view>
			<view class="ranking-flex">
				<view class="profile">
					<view class="logo"></view>
				</view>
				<image class="ranking-img" src="../static/images/ranking/3.png"></image>
			</view>
		</view>
		<view class="line"></view>
		<view class="ranking-btn">
			<view class="flex-item">
				<view class="btn-num">4</view>
				<view class="btn-logo"></view>
			</view>
			<view>
				<view class="btn-flxe">
					<view class="btn-flxe1">
						<view class="title">赚钱养心</view>
						<image class="ceo-img" src="../static/images/ranking/14.png"></image>
					</view>
					<view class="price">211360元</view>
				</view>
				<view class="time">加入时间：2024/10/24 </view>
			</view>
		</view>
		<view class="ranking-btn">
			<view class="flex-item">
				<view class="btn-num">5</view>
				<view class="btn-logo"></view>
			</view>
			<view>
				<view class="btn-flxe">
					<view class="btn-flxe1">
						<view class="title">赚钱养心</view>
						<image class="ceo-img" src="../static/images/ranking/14.png"></image>
					</view>
					<view class="price">211360元</view>
				</view>
				<view class="time">加入时间：2024/10/24 </view>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	name: 'Order',

	data() {
		return {
			navBarHeight: '',
		}
	},
	onLoad(options) {
		this.navBarHeight = this.$store.getters.heightData.navBarHeight + 'px'
	},
	onShow() {

	},
	methods: {

	}
}
</script>
<style lang="scss" scoped>
.order-list {
	padding: 20rpx 28rpx 10rpx;
}

.mt-30 {}

.top-box {
	background-image: url('https://rb.biomedical-wh.com/prod-api//profile/bdm_img/my_bg_1.png');
	/* 网络路径图片 */
	background-size: cover;
	/* 背景图片覆盖整个元素 */
	background-repeat: no-repeat;

	.head-flex {
		display: flex;
	}

	.img-head {
		width: 442rpx;
		height: 96rpx;
		margin-left: 28rpx;
		margin-top: 30rpx;
	}

	.img-head1 {
		width: 183rpx;
		height: 283rpx;
		margin-left: 14rpx;
	}

	.head-text {
		width: 474rpx;
		color: #4b3138;
		font-family: "PingFang SC";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		opacity: 0.6;
		margin-left: 28rpx;
		margin-top: 10rpx;
		margin-bottom: 28rpx;
	}
}

.ranking {
	display: flex;
	padding: 0 44rpx;
	margin-top: 20rpx;

	.ranking-flex {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ranking-img {
		width: 193rpx;
		height: 253rpx;
		z-index: 1;
	}

	.ranking-img1 {
		width: 220rpx;
		height: 300rpx;
		margin: 0 20rpx;
	}

	.profile {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
		background: #fff;
		margin-bottom: -52rpx;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
	}

	.profile1 {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
		background: #fff;
		margin-bottom: -52rpx;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.logo {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
		background: #000;
	}
}


.line {
	margin: 30rpx 28rpx;
	height: 2rpx;
	/* 线条粗细，可根据需要调整 */
	background-color: black;
	/* 线条颜色，可根据需要调整 */
	background: linear-gradient(to right, transparent, #ebe9e9 50%, transparent 100%)
}


.ranking-btn {
	display: flex;
	margin: 0 44rpx;
	margin-bottom: 40rpx;

	.btn-logo {
		width: 88rpx;
		height: 88rpx;
		margin: 0 30rpx;
		border-radius: 50%;
		background: #000;
	}

	.btn-num {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 40rpx;
		opacity: 0.5;
		margin-left: 17rpx;
	}

	.title {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 40rpx;
	}

	.price {
		color: #000000;
		text-align: right;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
	}

	.ceo-img {
		width: 78rpx;
		height: 30rpx;
		margin-left: 12rpx;
	}

	.time {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 34rpx;
		opacity: 0.5;
		margin-top: 6rpx;
	}
}

.btn-flxe {
	width: 483rpx;
	display: flex;
	justify-content: space-between;
}

.btn-flxe1 {
	display: flex;
	align-items: center;
}

.flex-item {
	display: flex;
	align-items: center;
}
</style>